<template>
  <div>
    <home-head></home-head>
    <img
      v-if="btnFlag"
      class="go-top"
      src="../../assets/img/hj.png"
      @click="backTop"
    />
    <van-pull-refresh v-model="isLoading" @refresh="pullrefresh">
      <div class="container">
        <!-- 轮播图开始 -->
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="red"
          :show-indicators="false"
        >
          <van-swipe-item v-for="banner in banners" :key="banner.id">
            <img v-lazy="banner.picUrl" alt="" />
          </van-swipe-item>
        </van-swipe>
        <!-- 轮播图结束 -->
        <!-- 优势开始 -->
        <div class="advantage">
          <img src="../../assets/img/youshi.png" alt="" />
        </div>
        <!-- 优势结束 -->
        <!-- 分类开始 -->
        <home-cates :cates="cates"></home-cates>
        <!-- 分类结束 -->
        <!-- 小轮播开始 -->
        <van-swipe
          class="my-swipe2"
          :autoplay="3000"
          indicator-color="white"
          :show-indicators="false"
        >
          <van-swipe-item
            ><img src="../../assets/img/xlb.png" />
          </van-swipe-item>
          <van-swipe-item
            ><img src="../../assets/img/xlb.png" />
          </van-swipe-item>
          <van-swipe-item
            ><img src="../../assets/img/xlb.png" />
          </van-swipe-item>
        </van-swipe>
        <!-- 小轮播结束 -->
        <!-- 猜你喜欢开始 -->
        <home-guess :opt="optimizationcates" @clickItem="goDetail"></home-guess>
        <!-- 猜你喜欢结束-->
        <!-- 商品开始 -->
        <van-list
          v-model="loading"
          :offset="100"
          :finished="finished"
          finished-text="没了"
          loading-text="加载ing"
          @load="loadmore"
        >
          <homegoods
            :items="items"
            @clickItem="goDetail"
            @addtoCart="addCart"
            @addfavor="addfavor"
          ></homegoods>
        </van-list>
        <!-- 商品结束 -->
      </div>
    </van-pull-refresh>
    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
import {
  classification,
  rollingimg,
  goodslist,
  favorYesorNo,
  addfavor
} from '_api'
import { getToken } from '_utils/token.js'
import { Toast } from 'vant'
import MyTabbar from '../../components/tabbar.vue'
import HomeHead from './components/homehead.vue'
import HomeCates from './components/homecates.vue'
import HomeGuess from './components/homeguess.vue'
import Homegoods from './components/homegoods.vue'
import { mapActions } from 'vuex'

export default {
  name: 'home',
  data () {
    return {
      cates: {},
      optimizationcates: [],
      items: [],
      banners: [],
      page: 1,
      pageSize: 6,
      loading: false,
      finished: false,
      isLoading: false,
      btnFlag: false
    }
  },
  created () {
    this.classify()
    this.rollimg()
    this.guessgoods()
  },
  mounted () {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    ...mapActions('Cart', ['ADD_CART']),
    backTop () {
      const that = this
      const timer = setInterval(() => {
        const ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    scrollToTop () {
      const that = this
      const scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 200) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    },
    rollimg () {
      rollingimg().then((res) => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    classify () {
      classification().then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    },
    homegoodlist () {
      goodslist({
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        this.isLoading = false
        this.loading = false
        if (res.data.code === 0) {
          this.items = [...this.items].concat([...res.data.data.result])
        }
        if (res.data.code === 700) {
          this.finished = true
        }
      })
    },
    guessgoods () {
      goodslist({
        categoryId: '74079,72400',
        orderBy: 'priceUp'
      }).then((res) => {
        if (res.data.code === 0) {
          this.optimizationcates = [...res.data.data.result]
        }
      })
    },
    loadmore () {
      this.homegoodlist()
      this.page++
    },
    pullrefresh () {
      this.page = 1
      this.items = []
      this.finished = false
      this.homegoodlist()
      this.page++
    },
    goDetail (id) {
      this.$router.push(`/details/${id}`)
    },
    addCart (id) {
      this.$store.dispatch('Cart/ADD_CART', {
        goodsId: id,
        number: 1,
        token: getToken()
      })
      // this.ADD_CART({
      //   goodsId: id,
      //   number: 1,
      //   token: getToken()
      // })
    },
    addfavor (id) {
      favorYesorNo({
        goodsId: id,
        type: 0,
        token: getToken()
      }).then((res) => {
        console.log(res)
        if (res.data.code === -1) {
          this.favorimg = 'like-o'
          addfavor({
            goodsId: id,
            type: 0,
            token: getToken()
          }).then((res) => {
            Toast.success('收藏成功')
          })
        }
        if (res.data.code === 0) {
          Toast.fail('已收藏')
          return false
        }
      })
    }
  },
  components: { MyTabbar, HomeHead, HomeCates, HomeGuess, Homegoods }
}
</script>

<style lang="scss" scoped type="text/css">
.container {
  background: #f4f5f7;
  padding: 1.03rem 0.27rem 1rem;
  .my-swipe {
    padding-top: 0.2rem;
    .van-swipe-item {
      width: 7.5rem;
      height: 2.8rem;
      img {
        width: 100%;
        border-radius: 0.2rem;
        height: 2.8rem;
      }
    }
  }
  .advantage {
    height: auto;
    img {
      width: 100%;
    }
  }
  .my-swipe2 {
    margin-top: 0.3rem;
    background: #fff;
    width: 100%;
    img {
      width: 100%;
      height: auto;
    }
  }
}
.go-top {
  background: gainsboro;
  width: 0.7rem;
  border-radius: 0.1rem;
  position: fixed;
  bottom: 1.1rem;
  right: 0.4rem;
  z-index: 9999999999999999;
}
</style>
